<template>
  <div class="home_map_componentMap">
    <div class="wrapper-title">
      <BaseTitle title="Map组件" />
    </div>

    <div class="wrapper-content">

      <!-- Map 组件 -->
      <div>
        <h2>Map 组件</h2>
        <h3><span class="Default a_hover" @click="initMapClick">初始化地图</span>部分代码提供是为了提供给开发者更灵活的方式创建地图，更加推荐开发者使用</h3>
        <h3>同样，我也为开发者提供了已经写好的 Map 组件</h3>
        <h3>
          <div class="exampleMap">
            <Map />
          </div>
        </h3>
        <code class="code">
          <!-- template -->
          <div>
            <div class="code-tag">
              <<span>template</span>>
            </div>
            <div class="code-indent2 comment">
              <<span>!--</span>
                放置地图的dom容器，这个容器必须设宽高
              <span>--</span>>
            </div>
            <div class="code-indent2 code-tag">
              <<span>div
                <span class="code-orange">class</span>=<span class="code-green">"map"</span></span>>
            </div>
            <div class="code-indent4 code-tag">
              <<span>Map
                <!-- <span class="code-orange">ref</span>=<span class="code-green">"map"</span></span> -->
              /</span>>
            </div>
            <div class="code-indent2 code-tag">
              </<span>div</span>>
            </div>
            <div class="code-tag">
              </<span>template</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- script -->
          <div>
            <div class="code-tag">
              <<span>script</span>>
            </div>

            <!-- import 和 export default -->
            <div>
              <div class="code-indent2">
                <span class="code-orange">import</span>
                { Components }
                <span class="code-orange">from</span>
                <span class="code-green">'src/base/Gykj_map'</span>
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent2">
                <span class="code-orange">export default</span>
                {
              </div>
            </div>

            <!-- components -->
            <div>
              <div class="code-indent4">
                components: {
              </div>
              <div class="code-indent6">
                Map:
                <span class="code-green">Components</span>.initMap
              </div>
              <div class="code-indent4">}</div>
            </div>

            <!-- export default 的 } -->
            <div class="code-indent2">}</div>

            <!-- /script -->
            <div class="code-tag">
              </<span>script</span>>
            </div>
          </div>
        </code>
      </div>

      <!-- Props、Emit、Slot、Methods -->
      <div>
        <h2>Props、Emit、Slot、Methods</h2>
        <h3>
          <div class="exampleMap">
            <Map
              ref="map"
              layerActive="terrain"
              chosenClass="chosenClass"
              :isHideBase="true"
              :isNeedClick="true"
              @mapClick="mapClick" />
          </div>
        </h3>
        <h3>
          <Button type="primary" @click="getMap">getMap</Button>
          <Button type="primary" @click="getLayers">getLayers</Button>
        </h3>
        <code class="code">
          <!-- template -->
          <div>
            <div class="code-tag">
              <<span>template</span>>
            </div>
            <div class="code-indent2 code-tag">
              <<span>div></span>
            </div>
            <div class="code-indent4 comment">
              <<span>!--</span>
                放置地图的dom容器，这个容器必须设宽高
              <span>--</span>>
            </div>
            <div class="code-indent4 code-tag">
              <<span>div
                <span class="code-orange">class</span>=<span class="code-green">"map"</span></span>>
            </div>
            <div class="code-indent6 code-tag">
              <<span>Map</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">ref</span>=<span class="code-green">"map"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">layerActive</span>=<span class="code-green">"terrain"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">chosenClass</span>=<span class="code-green">"chosenClass"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">:isHideBase</span>=<span class="code-green">"true"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">:isNeedClick</span>=<span class="code-green">"true"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">@mapClick</span>=<span class="code-green">"mapClick"</span></span><span class="code-tag">></span>
            </div>

            <div class="code-indent8">
              <span class="code-tag"><<span>div</span></span>
              <span class="code-orange">slot</span>=<span class="code-green">"loading"</span><span class="code-tag">></span>
            </div>
            <div class="code-indent10 comment">
              <<span>!-- 这里写你的loading组件 --></span>
            </div>
            <div class="code-indent8 code-tag">
              <<span>/div></span>
            </div>

            <div class="code-indent6 code-tag">
              <<span>/Map></span>
            </div>

            <div class="code-indent4 code-tag">
              </<span>div</span>>
            </div>

            <div class="code-emptyLine"></div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"getMap"</span></span><span class="code-tag">></span>getMap<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"getLayers"</span></span><span class="code-tag">></span>getLayers<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent2 code-tag">
              </<span>div</span>>
            </div>
            <div class="code-tag">
              </<span>template</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- script -->
          <div>
            <div class="code-tag">
              <<span>script</span>>
            </div>

            <!-- import 和 export default -->
            <div>
              <div class="code-indent2">
                <span class="code-orange">import</span>
                { Components }
                <span class="code-orange">from</span>
                <span class="code-green">'src/base/Gykj_map'</span>
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent2">
                <span class="code-orange">export default</span>
                {
              </div>
            </div>

            <!-- components -->
            <div>
              <div class="code-indent4">
                components: {
              </div>
              <div class="code-indent6">
                Map:
                <span class="code-green">Components</span>.initMap
              </div>
              <div class="code-indent4">}</div>
            </div>

            <!-- methods -->
            <div>
              <div class="code-indent4">
                methdos: {
              </div>
              <div class="code-indent6">
                mapClick (obj) {
              </div>
              <div class="code-indent8">
                <span class="code-orange">console</span>.log(obj)
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                getMap () {
              </div>
              <div class="code-indent8">
                <span class="code-default">const</span>
                Map =
                <span class="code-orange">this</span>.$refs['map'].getMap()
              </div>
              <div class="code-indent8">
                <span class="code-green">console</span>.log(Map)
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                getLayers () {
              </div>
              <div class="code-indent8">
                <span class="code-default">const</span>
                Layers =
                <span class="code-orange">this</span>.$refs['map'].getLayers()
              </div>
              <div class="code-indent8">
                <span class="code-green">console</span>.log(Layers)
              </div>
              <div class="code-indent6">}</div>

              <div class="code-indent4">}</div>
            </div>

            <!-- export default 的 } -->
            <div class="code-indent2">}</div>

            <!-- /script -->
            <div class="code-tag">
              </<span>script</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- style -->
          <div>
            <div class="code-tag">
              <<span>style></span>
            </div>
            <div class="code-indent2">
              <span class="code-orange">.chosenClass</span>
              {
            </div>
            <div class="code-indent4">
              <span class="code-purple">top</span>:
              <span class="code-purpleRed">20px</span>;
            </div>
            <div class="code-indent4">
              <span class="code-purple">bottom</span>:
              <span class="code-green">auto</span>
              <span class="code-orange">!important</span>;
            </div>
            <div class="code-indent2">
              }
            </div>
            <div class="code-tag">
              </<span>style></span>
            </div>
          </div>
        </code>
      </div>

      <!-- 云图、雷达图 图层 -->
      <div>
        <h2>云图、雷达图 图层</h2>
        <h3>
          <div class="exampleMap">
            <Map
              ref="cloudRadar-map"
              cloudRadarClass="cloudRadarClass" />
          </div>
        </h3>
        <h3>
          <Button type="primary" @click="addCloudLayer">添加云图</Button>
          <Button type="primary" @click="removeCloudLayer">删除云图</Button>
          <Button type="primary" @click="refreshCloudAnimate">手动重播云图动画</Button>
          <Button type="primary" @click="addRadarLayer">添加雷达图</Button>
          <Button type="primary" @click="removeRadarLayer">删除雷达图</Button>
          <Button type="primary" @click="refreshRadarAnimate">手动重播雷达图动画</Button>
        </h3>
        <code class="code">
          <!-- template -->
          <div>
            <div class="code-tag">
              <<span>template</span>>
            </div>
            <div class="code-indent2 code-tag">
              <<span>div></span>
            </div>
            <div class="code-indent4 comment">
              <<span>!--</span>
                放置地图的dom容器，这个容器必须设宽高
              <span>--</span>>
            </div>
            <div class="code-indent4 code-tag">
              <<span>div
                <span class="code-orange">class</span>=<span class="code-green">"map"</span></span>>
            </div>
            <div class="code-indent6 comment">
              <<span>!--</span>
                通过传入cloudRadarClass添加className，再使用该className修改样式
              <span>--</span>>
            </div>
            <div class="code-indent6 code-tag">
              <<span>Map</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">ref</span>=<span class="code-green">"map"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">cloudRadarClass</span>=<span class="code-green">"cloudRadarClass"</span></span><span class="code-tag"> /></span>
            </div>

            <div class="code-indent4 code-tag">
              </<span>div</span>>
            </div>

            <div class="code-emptyLine"></div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addCloudLayer"</span></span><span class="code-tag">></span>添加云图<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"removeCloudLayer"</span></span><span class="code-tag">></span>删除云图<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"refreshCloudAnimate"</span></span><span class="code-tag">></span>手动重播云图动画<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addRadarLayer"</span></span><span class="code-tag">></span>添加雷达图<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"removeRadarLayer"</span></span><span class="code-tag">></span>删除雷达图<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"refreshRadarAnimate"</span></span><span class="code-tag">></span>手动重播雷达图动画<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent2 code-tag">
              </<span>div</span>>
            </div>
            <div class="code-tag">
              </<span>template</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- script -->
          <div>
            <div class="code-tag">
              <<span>script</span>>
            </div>

            <!-- import 和 export default -->
            <div>
              <div class="code-indent2">
                <span class="code-orange">import</span>
                { Components }
                <span class="code-orange">from</span>
                <span class="code-green">'src/base/Gykj_map'</span>
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent2">
                <span class="code-orange">export default</span>
                {
              </div>
            </div>

            <!-- components -->
            <div>
              <div class="code-indent4">
                components: {
              </div>
              <div class="code-indent6">
                Map:
                <span class="code-green">Components</span>.initMap
              </div>
              <div class="code-indent4">},</div>
            </div>

            <!-- methods -->
            <div>
              <div class="code-indent4">
                methdos: {
              </div>

              <div class="code-indent6">
                addCloudLayer () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addLayer({ layerName: 'cloudLayer' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                removeCloudLayer () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].removeLayer({ layerName: 'cloudLayer' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                refreshCloudAnimate () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].refreshAnimate({ layerName: 'cloudLayer' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                addRadarLayer () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addLayer({ layerName: 'radarLayer' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                removeRadarLayer () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].removeLayer({ layerName: 'radarLayer' })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                removeRadarLayer () {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].refreshAnimate({ layerName: 'radarLayer' })
              </div>
              <div class="code-indent6">}</div>

              <div class="code-indent4">}</div>
            </div>

            <!-- export default 的 } -->
            <div class="code-indent2">}</div>

            <!-- /script -->
            <div class="code-tag">
              </<span>script</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- style -->
          <div>
            <div class="code-tag">
              <<span>style></span>
            </div>
            <div class="code-indent2">
              <span class="code-orange">.cloudRadarClass</span>
              {
            </div>
            <div class="code-indent4">
              <span class="code-purple">color</span>:
              <span class="code-green">Green</span>
              <span class="code-orange">!important</span>;
            </div>
            <div class="code-indent2">
              }
            </div>
            <div class="code-tag">
              </<span>style></span>
            </div>
          </div>
        </code>
      </div>

      <!-- 其它图层 -->
      <div>
        <h2>其它图层</h2>
        <h3>除了单独列出来的图层外，其余数据一张图图层的添加和删除，我都没有做单独的用法说明了</h3>
        <h3>因为它们的用法都是一致的，唯一不同的地方在于开发者传入的layerName</h3>
        <h3>而所有图层的layerName，都已经列在最底部的表格了，这里我以水闸为例子</h3>
        <h3>
          <div class="exampleMap">
            <Map
              ref="other-map"
              :isNeedClick="true"
              :isNeedSizeChange="true" />
          </div>
        </h3>
        <h3>
          <Button type="primary" @click="addLayer('gateLayer')">添加水闸图层</Button>
          <Button type="primary" @click="removeLayer('gateLayer')">删除水闸图层</Button>
        </h3>
        <code class="code">
          <!-- template -->
          <div>
            <div class="code-tag">
              <<span>template</span>>
            </div>
            <div class="code-indent2 code-tag">
              <<span>div></span>
            </div>
            <div class="code-indent4 comment">
              <<span>!--</span>
                放置地图的dom容器，这个容器必须设宽高
              <span>--</span>>
            </div>
            <div class="code-indent4 code-tag">
              <<span>div
                <span class="code-orange">class</span>=<span class="code-green">"map"</span></span>>
            </div>
            <div class="code-indent6 comment">
              <<span>!--</span>
                由于包含了图标图层，所以都设置isNeedClick和isNeedSizeChange为true，以便展示更多信息
              <span>--</span>>
            </div>
            <div class="code-indent6 code-tag">
              <<span>Map</span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">ref</span>=<span class="code-green">"map"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">:isNeedClick</span>=<span class="code-green">"true"</span></span>
            </div>
            <div class="code-indent8">
              <span class="code-orange">:isNeedSizeChange</span>=<span class="code-green">"true"</span></span><span class="code-tag"> /></span>
            </div>

            <div class="code-indent4 code-tag">
              </<span>div</span>>
            </div>

            <div class="code-emptyLine"></div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"addLayer('gateLayer')"</span></span><span class="code-tag">></span>添加水闸图层<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent4">
              <span class="code-tag"><<span>Button</span></span>
              <span class="code-orange">type</span>=<span class="code-green">"primary"</span></span>
              <span class="code-orange">@click</span>=<span class="code-green">"removeLayer('gateLayer')"</span></span><span class="code-tag">></span>删除水闸图层<span class="code-tag"><<span>/Button></span></span>
            </div>

            <div class="code-indent2 code-tag">
              </<span>div</span>>
            </div>
            <div class="code-tag">
              </<span>template</span>>
            </div>
          </div>

          <div class="code-emptyLine"></div>

          <!-- script -->
          <div>
            <div class="code-tag">
              <<span>script</span>>
            </div>

            <!-- import 和 export default -->
            <div>
              <div class="code-indent2">
                <span class="code-orange">import</span>
                { Components }
                <span class="code-orange">from</span>
                <span class="code-green">'src/base/Gykj_map'</span>
              </div>
              <div class="code-emptyLine"></div>
              <div class="code-indent2">
                <span class="code-orange">export default</span>
                {
              </div>
            </div>

            <!-- components -->
            <div>
              <div class="code-indent4">
                components: {
              </div>
              <div class="code-indent6">
                Map:
                <span class="code-green">Components</span>.initMap
              </div>
              <div class="code-indent4">},</div>
            </div>

            <!-- methods -->
            <div>
              <div class="code-indent4">
                methdos: {
              </div>

              <div class="code-indent6">
                addLayer (layerName) {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].addLayer({ layerName })
              </div>
              <div class="code-indent6">},</div>

              <div class="code-indent6">
                removeLayer (layerName) {
              </div>
              <div class="code-indent8">
                <span class="code-orange">this</span>.$refs['map'].removeLayer({ layerName })
              </div>
              <div class="code-indent6">}</div>

              <div class="code-indent4">}</div>
            </div>

            <!-- export default 的 } -->
            <div class="code-indent2">}</div>

            <!-- /script -->
            <div class="code-tag">
              </<span>script</span>>
            </div>
          </div>

        </code>
      </div>

      <!-- API -->
      <div>
        <h2>Props API</h2>
        <h3>
          <Table
            border
            size="small"
            :columns="apiThead"
            :data="apis.propsTbody"></Table>
        </h3>
        <h2>Emit API</h2>
        <h3>
          <Table
            border
            size="small"
            :columns="emitThead"
            :data="apis.emitTbody"></Table>
        </h3>
        <h2>Methods API</h2>
        <h3>
          <Table
            border
            size="small"
            :columns="methodsThead"
            :data="apis.methodsTbody"></Table>
        </h3>
        <h2>Slot API</h2>
        <h3>
          <Table
            border
            size="small"
            :columns="slotThead"
            :data="apis.slotTbody"></Table>
        </h3>
        <h2>LayerName API</h2>
        <h3>
          <div class="search">
            <div class="search-key">图层名字</div>
            <div class="search-input">
              <Input
                v-model="searchLayerName"
                placeholder="搜索图层LayerName" />
            </div>
          </div>
        </h3>
        <h3>
          <Table
            border
            size="small"
            :columns="layerNameThead"
            :data="layerNameTbody"></Table>
        </h3>
      </div>
    </div>

  </div>
</template>

<script>
import { Components } from 'base/Gykj_map'
import { apiThead, emitThead, methodsThead, slotThead } from './api/common'
import * as apis from './api/componentMap'

export default {
  components: {
    Map: Components.initMap
  },
  computed: {
    layerNameTbody () {
      return apis.layerNameTbody.filter(item => item.name.indexOf(this.searchLayerName) > -1)
    }
  },
  created () {
    this.apiThead = apiThead(undefined, { nameWidth: 145 })
    this.methodsThead = methodsThead(undefined, { nameWidth: 155 })
    this.emitThead = emitThead(undefined, { nameWidth: 145 })
    this.slotThead = slotThead()
    this.layerNameThead = apis.layerNameThead(this)
    this.apis = apis
  },
  data () {
    return {
      searchLayerName: ''
    }
  },
  methods: {
    getMap () {
      const Map = this.$refs['map'].getMap()
      console.log('getMap点击：', Map)
      alert('getMap点击，详细参数可以见 console ')
    },
    getLayers () {
      const Layers = this.$refs['map'].getLayers()
      console.log('getLayers点击：', Layers)
      alert('getLayers点击，详细参数可以见 console ')
    },
    mapClick (obj) {
      console.log('地图点击：', obj)
      alert('地图点击，详细参数可以见 console ')
    },
    addCloudLayer () {
      this.$refs['cloudRadar-map'].addLayer({ layerName: 'cloudLayer' })
    },
    removeCloudLayer () {
      this.$refs['cloudRadar-map'].removeLayer({ layerName: 'cloudLayer' })
    },
    refreshCloudAnimate () {
      this.$refs['cloudRadar-map'].refreshAnimate({ layerName: 'cloudLayer' })
    },
    addRadarLayer () {
      this.$refs['cloudRadar-map'].addLayer({ layerName: 'radarLayer' })
    },
    removeRadarLayer () {
      this.$refs['cloudRadar-map'].removeLayer({ layerName: 'radarLayer' })
    },
    refreshRadarAnimate () {
      this.$refs['cloudRadar-map'].refreshAnimate({ layerName: 'radarLayer' })
    },
    addLayer (layerName) {
      this.$refs['other-map'].addLayer({ layerName })
    },
    removeLayer (layerName) {
      this.$refs['other-map'].removeLayer({ layerName })
    },
    initMapClick () {
      this.$router.push({ name: 'home_map_initMap' })
    }
  }
}
</script>

<style lang="scss" scoped>
  .home_map_componentMap {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: auto;
    .search {
      width: 100%;
      display: flex;
      align-items: center;
      .search-key {
        flex: 0 0 70px;
        text-align: center;
      }
      .search-input {
        flex: 0 0 200px;
      }
    }
  }
</style>

<style lang="scss">
  .home_map_componentMap {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: auto;
    .chosenClass {
      top: 20px;
      bottom: auto !important;
    }
    .cloudRadarClass {
      color: Green !important;
    }
  }
</style>
